import React, {PureComponent} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    ScrollView,
    Button,
    Text,
    TextInput,
    StatusBar,
    SafeAreaView
} from "react-native";
import Tips from "react-native-root-tips";
import {isMobile, isPhoneDigit, isSms, isSmsDigit} from "../../../widget/CommonUtils";
import method from "../../../api/method";
import {fetchPostRequest} from "../../../api/NetworkTool";
import api from "../../../api/api";
import TimerButton from "../../../widget/login/TimerButton";


const {width} = Dimensions.get('window')
type Props = {
    navigation:any,
}

export default class EditPwdScene extends PureComponent<Props>{
    static navigationOptions = ({navigation}) => ({
        headerTintColor:'#333333',
        headerStyle:{backgroundColor:'white'},
        title:'忘记密码',
        headerRight:<Text/>,
    });
    constructor(props){
        super(props)
        this.state = {
            pwd:'',
            secureTextEntry:true,
            phone:'',
            sms:'',
            send_sms:false,
            is_login:false,
            clear:false,
        }
    }
    render(){
        return (
            <SafeAreaView style={styles.container}>
                    <View style={{marginLeft:8}}>
                        <View style={[styles.text_input,{marginTop:20}]}>
                            <Image style={{width:8,height:12, marginLeft:11}} source={require('../../../../res/img/login/login_phone.png')}/>
                            <TextInput onEndEditing={()=>{
                                this._onEndEditing()
                            }} keyboardType='numeric' ref={(e)=>{this._phoneTF = e;}} value={this.state.phone} onChangeText={(e)=>{this._phone_onChangeText(e)}} maxLength={11} style={{padding:0,marginLeft:7,width:(width - 69),color:'rgba(0,0,0,0.8)' ,fontSize:12,fontWeight:'200'}} placeholder='请输入您的手机号' placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent' />
                            {this.phone_show()}
                        </View>
                        <View style={{width:(width-25),marginTop:11,backgroundColor:'#cccccc',height:1,marginLeft:4}}/>
                    </View>
                    <View style={{marginLeft:8}}>
                        <View style={[styles.text_input,{marginTop:20}]}>
                            <Image style={{width:13,height:12,marginLeft:11}} source={require('../../../../res/img/login/login_sms.png')}/>
                            <TextInput onEndEditing={()=>{
                                this._onsmsEndEditing()
                            }} keyboardType='numeric' maxLength={6} onChangeText={(e)=>{this._sms_onChangeText(e)}} ref={(e)=>{this._smsTF = e;}} style={{padding:0,marginLeft:5,width:(width - 69 - 60),color:'rgba(0,0,0,0.8)' ,fontSize:12,fontWeight:'200'}}
                                       placeholder='请输入您的验证码' placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent' />
                            <TimerButton enable={this.state.send_sms}
                                         style={{backgroundColor:'#DB3843',
                                             marginLeft:10,marginRight:2,width:71,height:20,borderRadius:10,justifyContent:'center',alignItems:'center'}}
                                         textStyle={{color:'white',fontWeight:'200',fontSize:11}}
                                         disableColor='#333333'
                                         onClick={(shouldStartCountting)=>{
                                             this.send_sms();
                                         }}
                            />
                        </View>
                        <View style={{width:(width-25),marginTop:11,backgroundColor:'#cccccc',height:1,marginLeft:4}}/>
                    </View>

                    <View style={{marginLeft:8}}>
                        <View style={[styles.text_input,{marginTop:20}]}>
                            <Image style={{width:10,height:11,marginLeft:11}} source={require('../../../../res/img/login/login_pwd.png')}/>
                            <TextInput onEndEditing={()=>{
                                this._onpwdEndEditing()
                            }} onChangeText={(e)=>{this._pwd_onChangeText(e)}} ref={(e)=>{this._pwdTF = e;}} style={{padding:0,marginLeft:5,width:(width - 69),color:'rgba(0,0,0,0.8)' ,fontSize:11,fontWeight:'200'}}
                                       maxLength={15}  secureTextEntry={this.state.secureTextEntry} placeholder='请输入新密码 (最少6位)' placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent' />
                            {this.pwd_show()}
                        </View>
                        <View style={{width:(width-25),marginTop:11,backgroundColor:'#cccccc',height:1,marginLeft:4}}/>
                    </View>

                    {this.login_btn()}
            </SafeAreaView>
        )
    }
    _onEndEditing(){
        if (!isMobile(this.state.phone)) {
            Tips.showWarn('请输入有效的手机号码',{mask:true})
        }
    }
    _onpwdEndEditing(){
        if (this.state.pwd.length < 6) {
            Tips.showWarn('至少输入6位密码',{mask:true})
        }
    }
    _onsmsEndEditing(){
        if (this.state.sms.length < 6) {
            Tips.showWarn('请输入正确的验证码',{mask:true})
        }
    }
    pwd_show(){
        if (this.state.secureTextEntry){
            return <TouchableOpacity onPress={()=>{
                this.setState({secureTextEntry:!this.state.secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:34}} source={require('../../../../res/img/login/login_pwd_unshow.png')}/>
            </TouchableOpacity>
        }else {
            return <TouchableOpacity onPress={()=>{
                this.setState({secureTextEntry:!this.state.secureTextEntry})
            }}>
                <Image style={{width:12,height:5, marginRight:34}} source={require('../../../../res/img/login/login_pwd_show.png')}/>
            </TouchableOpacity>
        }

    }
    clear_handle(){
        this.setState({phone:'',clear:false,send_sms:false,is_login:false})

    }
    phone_show(){
        if (this.state.clear){
            return <TouchableOpacity onPress={()=>{
                this.clear_handle()
            }}>
                <Image style={{width:8,height:8, marginRight:11}} source={require('../../../../res/img/login/login_clear.png')}/>
            </TouchableOpacity>
        }else {
            return <View/>
        }
    }

    _phone_onChangeText(e){
        if (!isPhoneDigit(e)) {
            Tips.showWarn('请输入有效的手机号码',{mask:true})
            return
        }
        this.setState({phone:e})
        if (e.length > 0){
            this.setState({clear:true})
        }else {
            this.setState({clear:false})
        }
        if (isMobile(e)){
            this.setState({send_sms:true})
        }else {
            this.setState({send_sms:false})
        }
        if (isMobile(e) && isSms(this.state.sms) && this.state.pwd.length >=6){
            this.setState({is_login:true})
        }else {
            this.setState({is_login:false})
        }
        this.login_btn()
    }
    _sms_onChangeText(e){
        if (!isSmsDigit(e)) {
            Tips.showWarn('请输入正确的验证码',{mask:true})
            return
        }
        this.setState({sms:e})
        if (isMobile(this.state.phone) && isSms(e) && this.state.pwd.length >=6){
            this.setState({is_login:true})
        }else {
            this.setState({is_login:false})
        }
        this.login_btn()
    }
    _pwd_onChangeText(e){
        this.setState({pwd:e})
        if (isMobile(this.state.phone) && e.length >= 6 && isSms(this.state.sms)){
            this.setState({is_login:true})
        }else {
            this.setState({is_login:false})
        }
        this.login_btn()
    }

    send_sms(){
        let params = {
            mobile:this.state.phone,
            for:'reset',
        }
        fetchPostRequest(api.smscode,method.post,params)
            .then(res =>{

            }).catch(err =>{})
    }
    login_btn(){
        if (this.state.is_login){
            return <TouchableOpacity style={styles.login_btn} onPress={()=>{this.login_request()}}>
                <Text style={{color:'#FEFEFE',fontSize:14,fontWeight:'bold'}}>完成</Text>
            </TouchableOpacity>
        }else {
            return <View style={styles.un_login_btn}>
                <Text style={{color:'#FEFEFE',fontSize:14,fontWeight:'bold'}}>完成</Text>
            </View>
        }
    }

    login_request(){
        let params = {
            mobile:this.state.phone,
            newPassword:this.state.pwd,
            captcha:this.state.sms,
        }
        Tips.showLoading('修改中...',{mask:true})
        fetchPostRequest(api.resetPassword,method.post,params)
            .then(res =>{
                Tips.hide()
                Tips.showSuccess('修改成功',{mask:true})
                this.props.navigation.goBack()
            }).catch(err =>{
            Tips.hide()
            Tips.showFail(err,{mask:true})

        })
    }
}
const styles = StyleSheet.create({
    container:{
      backgroundColor:'white',
        flex:1,
    },
    register_view:{
       width:55,
       height:25,
       borderRadius:13,
        backgroundColor:'#DB3843',
        justifyContent:'center',
        alignItems:'center',
    },
    register_text:{
        color:'white',
        fontWeight:'bold',
        fontSize:12,
    },
    text_input:{
        flexDirection:"row",
        alignItems:'center',
    },
    login_btn:{
        backgroundColor:"#DB3843",
        borderRadius:17,
        height:35,
        width:(width - 24),
        borderWidth:1,
        borderColor:'rgba(219, 56, 67, 0.3)',
        marginTop:20,
        alignItems:'center',
        justifyContent:'center',
        marginLeft:12,
    },
    un_login_btn:{
        backgroundColor:"#999999",
        borderRadius:17,
        height:35,
        width:(width - 24),
        borderWidth:1,
        borderColor:'rgba(122, 122, 122, 0.3)',
        marginTop:20,
        alignItems:'center',
        justifyContent:'center',
        marginLeft:12,
    },
})